<template>
  <el-container
    v-loading="isLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-aside width="130px" class="myAside"
      ><MyAside @click="leftPush" :one-manu="myMenu"></MyAside
    ></el-aside>
    <el-container>
      <el-header class="myheader" height="50px">
        <MyHeader></MyHeader>
      </el-header>
      <el-main>
        <el-container>
          <el-container
            class="container"
            :style="{ paddingLeft: isTwoMenuNotNull ? '125px' : '10px' }"
          >
            <el-main style="display: flex; height: calc(100vh - 50px);">
              <div style="flex: 1;height: calc(100vh - 50px);">
                <MyTop v-if="isTwoMenuNotNull"></MyTop>
                <router-view></router-view>
                <MyFooter style="margin-bottom: 10px"></MyFooter>
              </div>
              <div class="right">
                <MyRight></MyRight>
              </div>
            </el-main>
          </el-container>
          <el-aside
            v-if="isTwoMenuNotNull"
            width="114px"
            class="myAsideTwo"
            style="float: right"
          >
            <MyAsideTwo></MyAsideTwo>
          </el-aside>
        </el-container>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters } from "vuex";

import MyFooter from "@/components/common/MyFooter";
import MyHeader from "@/components/common/MyHeader";
import MyAside from "@/components/common/MyAside";
import MyAsideTwo from "@/components/common/MyAsideTwo";
import MyTop from "@/components/common/MyTop";
import MyRight from "@/components/common/MyRight";

// 应用本地的json
import menu from "@/json/menu.json";

export default {
  name: "mains",
  props: {},
  data() {
    return {
      myMenu: []
    };
  },
  computed: {
    ...mapGetters(["twoMenu", "isLoading"]),
    isTwoMenuNotNull: function() {
      return this.twoMenu.length > 0;
    }
  },
  components: {
    // 第三方组件实例化
    MyFooter,
    MyHeader,
    MyAside,
    MyAsideTwo,
    MyTop,
    MyRight
  },
  methods: {
    // 方法
    leftPush(e) {
      var a = {
        twoMenu: e.twoMenu,
        lable: e.oneName,
        oneIndex: e.index
      };
      this.$store.commit("setTwoMenu", a);
      this.$router.push(e.path);
    }
  },
  mounted() {
    this.myMenu = menu.menu;
  }
};
</script>

<style scoped>
@import "~@/assets/scss/index.css";
</style>
